/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { MithrilViewComponent } from "jsx/mithril-component";
import _ from "lodash";
import m from "mithril";
import { i18n } from "helpers/i18n";
import { Primary, Secondary } from "views/components/buttons";
import styles from "./modals.scss";
import { TextAreaField } from "views/components/forms/input_fields";
import Stream from "mithril/stream";

interface Attrs {
  configContent: string;
  configLocation: string;
  lastModifiedBy: string;
  lastModifiedAt: string;
  onEdit: () => void;
  isEditing?: boolean;
  editedConfigXml?: Stream<string>;
  onCancel?: () => void;
  onSave?: () => void;
  onContentChange?: (content: string) => void;
}

/**
 * AdminConfigXmlWidget组件用于显示GoCD服务器配置XML的查看和编辑界面
 */
export class AdminConfigXmlWidget extends MithrilViewComponent<Attrs> {
  /**
   * 渲染组件视图
   * @param vnode Mithril节点对象，包含组件属性
   */
  view(vnode: m.Vnode<Attrs>) {
    const { configContent, configLocation, lastModifiedBy, lastModifiedAt, isEditing, editedConfigXml } = vnode.attrs;

    const isEditingMode = isEditing || false;
    const currentContent = isEditingMode && editedConfigXml ? editedConfigXml() : configContent;

    return (
      <div className={styles.configXmlContainer} data-test-id="admin-config-xml-widget">
        {/* 配置文件路径 - 右上角 */}
        <div className={styles.configXmlFilePathTop}>
          {i18n.tSyncForPage("admin.config_xml.configuration.file.path", "admin-config-xml")}: {configLocation}
        </div>

        {/* 统一的配置显示区域 */}
        <div className={styles.configXmlMainPanel}>
          {/* 配置信息头部区域 */}
          <div className={styles.configXmlHeader}>
            <div className={styles.configXmlInfo}>
              <div className={styles.configXmlLastModified}>
                {i18n.tSyncForPage("admin.config_xml.last.modified", "admin-config-xml")} {lastModifiedAt}{" "}
                {i18n.tSyncForPage("admin.config_xml.by", "admin-config-xml")} {lastModifiedBy}
              </div>
            </div>
            <div className={styles.configXmlActions}>
              {isEditingMode ? (
                [
                  <Secondary small={true} data-test-id="cancel-config-button" onclick={vnode.attrs.onCancel}>
                    {i18n.tSyncForPage("admin.config_xml.cancel.button", "admin-config-xml")}
                  </Secondary>,
                  <Primary small={true} data-test-id="save-config-button" onclick={vnode.attrs.onSave}>
                    {i18n.tSyncForPage("admin.config_xml.save.button", "admin-config-xml")}
                  </Primary>,
                ]
              ) : (
                <Primary small={true} data-test-id="edit-config-button" onclick={vnode.attrs.onEdit}>
                  {i18n.tSyncForPage("admin.config_xml.edit.button", "admin-config-xml")}
                </Primary>
              )}
            </div>
          </div>

          {/* 配置内容展示区域 */}
          <div className={styles.configXmlContent}>
            {isEditingMode ? (
              <TextAreaField
                resizable={true}
                rows={25}
                property={editedConfigXml}
                css={styles.configXmlTextarea}
                onchange={(e: any) => {
                  if (vnode.attrs.onContentChange) {
                    vnode.attrs.onContentChange(e.target.value);
                  }
                }}
              />
            ) : (
              <pre className={styles.configXmlPre}>{currentContent}</pre>
            )}
          </div>
        </div>
      </div>
    );
  }
}
